import { Avatar, Button, Image, Space, Table, Tag } from 'antd'
import { useEffect, useState } from 'react'
import TitleSearch from '../../components/TitleSearch'
import api from '../../api'


const columns = [
    {
        title: '用户编号',
        dataIndex: '_id',
        align: 'center',
    },
    {
        title: '用户名',
        dataIndex: 'nickName',
        align: 'center',
    },
    {
        title: '头像',
        dataIndex: 'vatarUrl',
        align: 'center',
        render: text => <Image src={text} style={{ width: '50px', height: '50px' }} />,
    },
    {
        title: '住址',
        dataIndex: 'province',
        align: 'center',
    },
    {
        title: 'VIP截止时间',
        dataIndex: 'vipdate',
        align: 'center',
    },
    {
        title: '操作',
        align: 'center',
        render: () => (
            <Space>
                <Button type="primary">充值会员</Button>
                <Button type="primary" danger>取消会员</Button>
                <Button type="primary" danger>删除</Button>
            </Space>
        )
    }
]

const VipPage = () => {
  
    const [data, setData] = useState([])


    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const res = await api.member.getAllMembers()
        if (res.meta.status) {
            const ResData=res.data//.filter(item=>(item.vip))
            setData(ResData)
        }
    }

    return (
        <div>
            <TitleSearch title='会员管理' />
            <Table
                bordered
                dataSource={data}
                columns={columns}
                rowKey='_id'
            />
        </div>
    )
}

export default VipPage